<template>
  <body>
    <div id="HomePage">
      <div class="homeHeader">
        <div class="logo">
          <img id="logo" src="../../assets/Logo.jpeg" alt="" />
          <h3>高考志愿填报智能辅助系统</h3>
        </div>
        <div class="nav">
          <div class="navMenu">
            <el-menu
              style="border: none"
              :default-active="$route.path"
              router
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#fff"
              text-color="rgba(0, 21, 41,.8)"
              active-text-color="rgba(255,101,0)"
            >
              <el-menu-item index="/homePage">
                <span slot="title">首页</span>
              </el-menu-item>
              <el-menu-item index="/college">
                <span slot="title">院校查询</span>
              </el-menu-item>
              <el-menu-item index="/major">
                <span slot="title">专业查询</span>
              </el-menu-item>
              <el-menu-item index="/fillAspiration">
                <span slot="title">模拟填志愿</span>
              </el-menu-item>
              <el-menu-item index="/news">
                <span slot="title">高考资讯</span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
        <div class="userMessage">
          <ul v-if="!showname">
            <router-link href="#" to="/register">注册</router-link>
            <router-link href="#" to="/login">登录</router-link>
          </ul>
          <div v-if="showname">
            <router-link class="show" to="/home">{{ firstName }}</router-link>
            <el-button type="danger" plain @click="logout()"
              >退出登录</el-button
            >
            <router-link to="/manager" v-if="showManager === true"
              >后台入口</router-link
            >
          </div>
        </div>
      </div>
      <div class="homeContent">
        <router-view></router-view>
      </div>
      <div class="homeFooter">
        <div class="footer">
          <div class="instructions">
            <h2>系统使用说明</h2>
            <h4>
              1、本查询系统的信息仅供参考，具体数据请以学校官网或考试院发布为准。
            </h4>
            <h4>2、本站数据未经授权严禁转载，违者将依法追究责任。</h4>
            <h4>
              3、如对本系统或相关服务有任何疑问，可发送邮件至：1959198478@qq.com，或拨打电话198-7136-0508。
            </h4>
          </div>
          <div class="erweima">
            <img :src="img" alt="" />
          </div>
        </div>
      </div>
    </div>
  </body>
</template>

<script>
import qs from "qs";
import throttling from "@/public/throttling.js";
export default {
  name: "HomePage",
  data() {
    return {
      // 根据当前路由设置默认值     根据需求使用path或者name
      activeIndex: this.$route.path,
      // 导航是否变色
      navColorActive: 0,
      // 导航
      navList: [
        {
          name: "首页",
          path: "/",
        },
        {
          name: "院校查询",
          path: "/college",
        },
        {
          name: "专业查询",
          path: "/major",
        },
        {
          name: "模拟填志愿",
          path: "/fillAspiration",
        },
        {
          name: "高考资讯",
          path: "/news",
        },
      ],
      // 首页用户名
      firstName: "",
      // 是否显示后台入口
      showManager: false,
      // 是否显示用户名
      showname: false,
      // footer二维码
      img: require("../../assets/二维码.png"),
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.activeIndex = key;
    },
    // 登出
    logout: throttling(function () {
      // 清空token
      var _this = this;
      this.$axios.get("/logout").then((res) => {
        console.log(res);
        window.sessionStorage.removeItem("tokenvalue");
        window.sessionStorage.removeItem("identify");
        _this.$store.commit("logout");
        _this.$router.replace("/login");
      });
    }, 1000),
  },
  created() {
    const token = window.sessionStorage.getItem("tokenvalue");
    this.$axios.defaults.headers.common["satoken"] = token;
    const identify = window.sessionStorage.getItem("identify");
    const managername = JSON.parse(
      window.sessionStorage.getItem("managername" || "[]")
    );
    const username = JSON.parse(
      window.sessionStorage.getItem("username" || "[]")
    );
    if (token !== null) {
      console.log(token);
      this.showname = true;
      if (identify === "201") {
        this.firstName = managername;
        this.showManager = true;
      } else if (identify === "200") {
        this.firstName = username;
        this.showManager = false;
      } else {
        this.showManager = false;
      }
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  width: 100%;
  font-size: 16px;
}

#HomePage {
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.homeHeader {
  z-index: 999;
  display: flex;
  justify-content: space-between;
  width: 90%;
  height: 9.8vh;
  color: rgba(0, 21, 41);
}

.homeHeader a {
  color: rgba(0, 21, 41);
}

.homeHeader-active {
  position: fixed;
  top: 0;
}

.logo {
  height: 9.8vh;
  margin-left: 1.5vw;
  font-size: 16px;
}
#logo {
  float: left;
  width: 2.6vw;
  height: 5.7vh;
  margin-top: 0.9vw;
}

.logo h3 {
  margin-left: 1.1vw;
  float: left;
  height: 9.8vh;
  line-height: 9.8vh;
  text-align: center;
  color: rgba(0, 21, 41);
  font-size: 18px;
}

.nav {
  margin-left: 1.5vw;
  height: 9.8vh;
  font-size: 24px;
}

.navMenu {
  height: 9.8vh;
}

.navMenu /deep/ .el-menu {
  height: 9.8vh;
}

.navMenu .el-menu .el-menu--horizontal .el-menu-item {
  height: 9.8vh;
}

.navMenu .el-menu /deep/.el-menu-item {
  width: 7.4vw;
  text-align: center;
  height: 9.8vh;
}

.el-menu-item span {
  font-weight: bold;
  font-family: "微软雅黑";
  font-size: 18px;
}

.el-menu-item span:hover {
  color: rgba(255, 101, 0);
}

.userMessage {
  height: 9.8vh;
  line-height: 9.8vh;
  text-align: center;
  font-size: 16px;
}

.userMessage a:first-child {
  margin-right: 0.7vw;
}
.userMessage a {
  margin-left: 0.7vw;
  color: rgba(0, 21, 41);
}

.userMessage a:hover {
  color: rgba(255, 101, 0);
}

.userMessage /deep/ .el-button {
  width: 7.4vw;
  font-size: 14px;
  text-align: center;
}

.homeFooter {
  width: 100%;
  min-height: 40.7vh;
  background-color: rgba(240, 242, 245);
}

.footer {
  width: 85%;
  display: flex;
  margin: 3.3vh auto;
}

.instructions {
  color: rgba(0, 21, 41);
  width: 85%;
  height: 16.3vh;
  text-align: left;
  margin: 4.9vh auto;
}

.instructions h2 {
  font-weight: normal;
  display: block;
  height: 4.9vh;
  width: 11.1vw;
  margin-bottom: 1.5vw;
  font-size: 20px;
}

.instructions h4 {
  display: block;
  font-weight: normal;
  height: 4.9vh;
  margin-bottom: 1.6vh;
}

.instructions h4:last-child {
  margin-bottom: 0;
}

.erweima {
  width: 10.4vw;
  margin: 4.9vh auto;
}

.erweima img {
  width: 100%;
}
</style>
